<template>
  <div class="author">
      <div class="top">
          <img src="../assets/返回.png" alt="" @click="fanhui">
          <img src="../assets/更多.png" alt="">
      </div>
      <div class="author-img" v-if="author[0]">
          <img v-if="author[0].app_background!=''" :src="author[0].app_background" alt="">
          <img v-else src="../assets/背景图.webp" alt="">
      </div>
      <div class="author-neirong" v-if="author[0]">
          <img class="im1" :src="author[0].avatar" alt="">

          <div class="name" v-if="author[0]">
              <p>{{author[0].username}}</p>
              <img v-if="author[0].vip_status===1" src="../assets/vip.png" alt="">
          </div>
          <p class="pn">{{author[0].occupation}}&nbsp;<span v-if="author[0].location&&author[0].location.province">{{author[0].location.province.name}}</span></p>
          <p class="pm">{{author[0].verify_description}}</p>
          <div  class="num">
             <div class="numname" v-if="author[0]">
                 <p class="p1">{{zan}}</p>
                 <p class="p2">人气</p>
             </div>
             <div class="numname" v-if="author[0]">
                 <p class="p1">{{fensi}}</p>
                 <p class="p2">粉丝</p>
             </div>
             <div class="numname" v-if="author[0]">
                 <p class="p1">{{guanzhu}}</p>
                 <p class="p2">关注</p>
             </div>
          </div>

          <div class="btn">
              <div class="lianxi">联系合作</div>
              <div class="guanzhu">关注</div>
          </div>
      </div>
      
      <div class="tabbar">
          <div class="tabbar-item" v-for="(item,index) in tabbarData" :key="index" :class="{active: activeIndex===index}" @click="toggleTabbar(index,item.name)">{{item.title}}</div>
      </div>
      <router-view></router-view>

  </div>
</template>

<script>
export default {
  created(){
    this.getauthormessage(this.$route.query.id)
  },
  data(){
      return{
        active: 'home',
        author:[],
        zan:'',
        fensi:'',
        guanzhu:'',
        activeIndex: 0,
        id:"",
        tabbarData: [
          {
            title: '作品',
            name:'zuopin',
            
          },
          {
            title: '专辑',
            name:'zhuanji',
            
          },
          {
            title: '喜欢',
            name:'like',
            
          },
          
        ]
      }
  },
  methods:{
      //视频点赞数
       formatNumber(num) {
      num = Number(num);
      if (num === 0) {
        return num + "";
      } else if (num >= 1 && num <= 10000) {
        return num + "";
      } else {
        return (num / 10000).toFixed(1) + "w";
      }
    },
      toggleTabbar(index,name) {
            
            if (this.activeIndex === index) {
              return;
            }
            this.activeIndex = index;
            this.$router.push({name:name,query:{id:this.author[0].id}})
      },
      fanhui(){
        this.$router.push({name:'faxian'})
      },
      getauthormessage(id){
          this.axios({
              method:'get',
              url:'https://apis.netstart.cn/xpc/user/'+id
          }).then(result=>{
            this.author.push(result.data.data)
           
           this.zan=this.formatNumber(this.author[0].count.count_popularity);
           this.fensi=this.formatNumber(this.author[0].count.count_follower);
           this.guanzhu=this.formatNumber(this.author[0].count.count_followee);
           this.$router.push({name:'zuopin',query:{id:this.author[0].id}})
           
          }).catch(err=>{
             
          })
      }
  }
}
</script>

<style lang="less" scoped>
.author{
    width: 100%;
}
.top{
    width: 90%;
    height: 30px;
    display: flex;
    margin-left: 15px;
    margin-top: 10px;
    position: fixed;
    justify-content: space-between;
    img{
        width: 23px;
        height: 23px;
    }
}
.author-img{
    width: 100%;
    img{
        width: 100%;
        height: 250px;
    }
}
.author-neirong{
    .pn{
        color: rgb(230, 230, 230);
    }
    .pm{
        color: rgb(230, 230, 230);
    }
    width: 93%;
    height: 200px;
    position: relative;
    top:-200px;
    margin-left: 15px;
    .im1{
        width: 40px;
        height: 40px;
        border-radius: 50%;
       
    }
    .name{
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        p{
          font-size: 18px;
          color: white;
        }
        img{
            width: 20px;
            height: 20px;
            margin-left: 5px;
        }
    }
    .num{
        width: 50%;
        height: 55px;
        display: flex;
        margin-top: -5px;
        margin-left: -10px;
        .numname{
            width: 33%;
            height: 60px;
            text-align: center;
            .p1{
                color: white;
                font-size: 15px;
                margin-top: 10px;
            }
            .p2{
                margin-top: -10px;
                font-size: 13px;
                color: white;
            }
        }
    }
    .btn{
        width: 45%;
        height: 50px;
        display: flex;
        margin-left: 50%;
        margin-top: -50px;
        align-items: center;
        justify-content: space-between;
        .lianxi{
           width: 45%;
           height: 30px;
           text-align: center;
           line-height: 30px;
           background-color: white;
           border-radius: 15px;
        }
        .guanzhu{
           width: 45%;
           height: 30px;
           color: white;
           line-height: 30px;
           text-align: center;
           background-color: rgb(228,75,57);
           border-radius: 15px;
        }
    }
    
}
.tabbar{
    width: 95%;
    height: 30px;
    display: flex;
    margin-top: -190px;
    border-bottom:1px solid #ddd;
    margin-left: 5px;
    .tabbar-item{
        width: 33%;
        height: 30px;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
    }
}
.tabbar-item.active{
      color: #e4393c;
}
</style>